<!-- 用车申请 -->
<template>
  <div class="app-container">
    <!-- 表格状态切换按钮 -->
    <ul class="nav">
      <li v-for="v in navData" :class="{ active: v.value == queryParams.orderStatus }" @click="navChangeHandle(v.value)">
        {{ v.label }}
      </li>
    </ul>
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <searchType v-for="v in searchProps" :data="v" :selects="sel_option[v.prop]" v-model="queryParams[v.prop]"
        :handleQuery="handleQuery">
      </searchType>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-show="queryParams.orderStatus == '67'">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['gwc:application:add']">申请</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" :disabled="single"
          v-hasPermi="['gwc:application:edit']">补单</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['gwc:application:remove']">删除</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport"
          v-hasPermi="['gwc:application:export']">导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="applicationList" @selection-change="handleSelectionChange" ref="myTable">
      <el-table-column :label="v.label" align="center" :prop="v.prop" :width="v.width" v-for="v in tableProps">
        <template #default="scope">
          <span v-if="v.prop == 'destination'">{{ scope.row[v.prop].map(v => v.address).join(',') }}</span>
          <dict-tag v-else-if="v.prop == 'orderStatus'" :options="sel_option.applicationTableOrderStatus"
            :value="scope.row[v.prop]" />
          <dict-tag v-else-if="v.prop == 'purpose'" :options="sel_option[v.prop]" :value="scope.row[v.prop]" />
          <span v-else>{{ scope.row[v.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300" fixed="right">
        <template #default="scope">
          <el-button link type="primary" @click="handleDetial(scope.row)" v-show="scope.row.orderStatus != '5'"
            v-hasPermi="['gwc:application:edit']">详情</el-button>
          <!-- 待审批 -->
          <template v-if="scope.row.orderStatus == '0'">
            <el-button link type="primary" @click="handleUpdate(scope.row)"
              v-hasPermi="['gwc:application:edit']">修改</el-button>
            <el-button link type="primary" @click="handleSend(scope.row, 6)" v-show="queryParams.orderStatus == '67'"
              v-hasPermi="['gwc:application:edit']">撤销订单</el-button>
          </template>
          <!-- 待调度 -->
          <template v-else-if="scope.row.orderStatus == '1'">

          </template>
          <!-- 待接单 -->
          <template v-else-if="scope.row.orderStatus == '2'">
            <el-button link type="primary" @click="handleSend(scope.row, 3)"
              v-hasPermi="['gwc:application:edit']">接单</el-button>
            <el-button link type="primary" @click="dispatchDetail(scope.row)"
              v-hasPermi="['gwc:application:edit']">用车详情</el-button>
          </template>
          <!-- 待出车 -->
          <template v-else-if="queryParams.orderStatus == '3'">
            <el-button link type="primary" @click="handleSend(scope.row, 4)"
              v-hasPermi="['gwc:application:edit']">出车</el-button>
            <el-button link type="primary" @click="dispatchDetail(scope.row)"
              v-hasPermi="['gwc:application:edit']">用车详情</el-button>
          </template>
          <!-- 待还车 -->
          <template v-else-if="queryParams.orderStatus == '4'">
            <el-button link type="primary" @click="returnCar(scope.row)"
              v-hasPermi="['gwc:application:edit']">还车</el-button>
            <el-button link type="primary" @click="dispatchDetail(scope.row)"
              v-hasPermi="['gwc:application:edit']">用车详情</el-button>
          </template>
          <!-- 还车成功 -->
          <template v-else-if="scope.row.orderStatus == '5'">
            <el-button link type="primary" @click="dispatchDetail(scope.row)"
              v-hasPermi="['gwc:application:edit']">用车详情</el-button>
            <el-button link type="primary" @click="returnHandleDetial(scope.row)"
              v-hasPermi="['gwc:application:edit']">还车详情</el-button>
          </template>
          <!-- 撤销订单 -->
          <template v-else-if="scope.row.orderStatus == '6'">
            <el-button link type="primary" @click="handleUpdate(scope.row)"
              v-hasPermi="['gwc:application:edit']">修改</el-button>
            <el-button link type="primary" @click="handleSend(scope.row, 0)"
              v-hasPermi="['gwc:application:edit']">提交</el-button>
          </template>
          <!-- 已驳回 -->
          <template v-else-if="scope.row.orderStatus == '7'">
            <el-button link type="primary" @click="handleUpdate(scope.row)"
              v-hasPermi="['gwc:application:edit']">修改</el-button>
            <el-button link type="primary" @click="handleSend(scope.row, 0)"
              v-hasPermi="['gwc:application:edit']">提交</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改用车申请对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body :destroy-on-close="true" class="sky-form">
      <el-form ref="applicationRef" :model="form" :rules="rules" label-width="100px" :disabled="formDisabled">
        <el-form-item v-for="v in editParams" :key="v.prop" :label="v.label" :prop="v.prop" :class="v.type">
          <el-input v-if="v.type == 'input'" v-model.trim="form[v.prop]" :disabled="v.disabled"></el-input>
          <el-select v-else-if="v.type == 'select'" v-model="form[v.prop]" filterable clearable>
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-tree-select v-else-if="v.type == 'treeSelect'" v-model="form[v.prop]" clearable :data="sel_option[v.prop]"
            :expand-on-click-node="false" :render-after-expand="false" check-strictly :props="{ label: 'label' }"
            node-key="id" filterable placeholder="" />
          <ImageUpload :limit="6" :rank="0" ref="fileUpload" url='/app/vehicleApplication/uploadVoucher'
            :pictures='form[v.prop] || []' v-else-if="v.type == 'photo'" :disabled="formDisabled">
          </ImageUpload>
          <el-date-picker v-else-if="v.type == 'datePicker'" v-model="form[v.prop]" type="datetime"
            :disabled-date="disabledDate" value-format="YYYY-MM-DD HH:mm:ss" />
          <destination v-else-if="v.type == 'destination'" v-model="form[v.prop]" :disabled="formDisabled">
          </destination>
          <el-input v-else-if="v.type == 'textarea'" v-model="form[v.prop]" type="textarea" :rows="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" v-show="!formDisabled">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 还车对话框 -->
    <el-dialog title="还车" v-model="returnOpen" width="800px" append-to-body :destroy-on-close="true" class="sky-form">
      <el-form ref="returnRef" :model="form" :rules="rules" label-width="100px" :disabled="formDisabled">
        <el-form-item v-for="v in returnEditParams" :key="v.prop" :label="v.label" :prop="v.prop" :class="v.type">
          <el-input v-if="v.type == 'input'" v-model.trim="form[v.prop]"></el-input>
          <el-select v-else-if="v.type == 'select'" v-model="form[v.prop]" filterable clearable>
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-tree-select v-else-if="v.type == 'treeSelect'" v-model="form[v.prop]" clearable :data="sel_option[v.prop]"
            :expand-on-click-node="false" :render-after-expand="false" check-strictly :props="{ label: 'label' }"
            node-key="id" filterable placeholder="" />
          <ImageUpload :limit="6" :rank="0" ref="fileUpload" url='/app/vehicleApplication/uploadVoucher'
            :pictures='form[v.prop] || []' v-else-if="v.type == 'photo'" :disabled="formDisabled">
          </ImageUpload>
          <el-date-picker v-else-if="v.type == 'datePicker'" v-model="form[v.prop]" type="datetime"
            :disabled-date="disabledDate" value-format="YYYY-MM-DD HH:mm:ss" />
          <destination v-else-if="v.type == 'destination'" v-model="form[v.prop]" :disabled="formDisabled">
          </destination>
          <el-input v-else-if="v.type == 'textarea'" v-model="form[v.prop]" type="textarea" :rows="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" v-show="!formDisabled">
          <el-button type="primary" @click="returnSubmitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 还车完成详情 -->
    <el-dialog :title="title" v-model="returnDetailOpen" width="800px" append-to-body :destroy-on-close="true"
      class="sky-form">
      <el-form :model="form" :rules="rules" label-width="100px" :disabled="formDisabled">
        <el-form-item v-for="v in returnDetailEditParams" :key="v.prop" :label="v.label" :prop="v.prop" :class="v.type">
          <el-input v-if="v.type == 'input'" v-model.trim="form[v.prop]" :disabled="v.disabled"></el-input>
          <el-select v-else-if="v.type == 'select'" v-model="form[v.prop]" filterable clearable>
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-tree-select v-else-if="v.type == 'treeSelect'" v-model="form[v.prop]" clearable :data="sel_option[v.prop]"
            :expand-on-click-node="false" :render-after-expand="false" check-strictly :props="{ label: 'label' }"
            node-key="id" filterable placeholder="" />
          <ImageUpload :limit="6" :rank="0" ref="fileUpload" url='/app/vehicleApplication/uploadVoucher'
            :pictures='form[v.prop] || []' v-else-if="v.type == 'photo'" :disabled="formDisabled">
          </ImageUpload>
          <el-date-picker v-else-if="v.type == 'datePicker'" v-model="form[v.prop]" type="datetime"
            :disabled-date="disabledDate" value-format="YYYY-MM-DD HH:mm:ss" />
          <destination v-else-if="v.type == 'destination'" v-model="form[v.prop]" :disabled="formDisabled">
          </destination>
          <el-input v-else-if="v.type == 'textarea'" v-model="form[v.prop]" type="textarea" :rows="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" v-show="!formDisabled">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 调度光伏板详情 -->
    <el-dialog title="调度光伏板详情" v-model="detailOpen" width="800px" append-to-body>
      <el-table :data="form.selects" style="height: 600px;">
        <el-table-column label="序号" align="center" type="index" :width="55"> </el-table-column>
        <el-table-column :label="v.label" align="center" :prop="v.prop" :width="v.width" v-for="v in detailTableProps">
          <template #default="scope">
            <dict-tag v-if="v.prop == 'orderStatus'" :options="sel_option.applicationTableOrderStatus"
              :value="scope.row[v.prop]" />
            <dict-tag v-else-if="v.prop == 'purpose'" :options="sel_option[v.prop]" :value="scope.row[v.prop]" />
            <span v-else>{{ scope.row[v.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="Application" lang="ts">
import searchType from "@/components/tableRelate/searchType.vue";
import { listVehicles } from "@/api/gwc/vehicles";
import destination from "@/components/tableRelate/destination.vue";
import { searchComponentType } from "@/components/tableRelate/searchTypeTs"
import { listApplication, getApplication, delApplication, addApplication, updateApplication } from "@/api/gwc/application";
import { getSearchCompanyListRole } from "@/api/system/dept";
import useUserStore from '@/store/modules/user'
import dayjs from "dayjs"
const { proxy } = getCurrentInstance() as any;

const applicationList = ref([]);
const open = ref(false);
const returnOpen = ref(false);
const detailOpen = ref(false);
const returnDetailOpen = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const disabledDate = (time: Date) => {
  const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
  const today = new Date();
  const yesterday = new Date(today.getTime() - oneDay);
  return time.getTime() <= yesterday.getTime()
}
const sel_option = ref<any>({});
const treeList = ref([]);
const user = useUserStore().info as { userName: string, phonenumber: string, dept: { id: string, deptName: string } };
getSearchCompanyListRole().then(res => {
  treeList.value = res.data
  sel_option.value.companyId = res.data
});
const tableProps = ref([
  { label: "申请状态", prop: "orderStatus", width: "120", type: 'dict' },
  { label: "用车人姓名", prop: "useName", width: "120" },
  { label: "用车人电话", prop: "useTel", width: "120" },
  { label: "申请人姓名", prop: "applyName", width: "120" },
  { label: "申请人电话", prop: "applyTel", width: "120" },
  { label: "所属部门", prop: "companyName", width: "120" },
  { label: "用途", prop: "purpose", width: "120", type: 'dict' },
  { label: "用车事由", prop: "rniemark", width: "120" },
  { label: "用车人数", prop: "userNum", width: "120" },
  { label: "上车地点", prop: "boardingLocation", width: "120" },
  { label: "目的地", prop: "destination", width: "120" },
  { label: "用车数量", prop: "vehicleNum", width: "120" },
  { label: "申请时间", prop: "createTime", width: "180" },
  { label: "用车时间", prop: "boardingTime", width: "180" },
  { label: "返程时间", prop: "returnTime", width: "180" },
])
const detailTableProps = reactive([
  { label: "负责人名称", prop: "driverName", width: "140" },
  { label: "光伏板编号", prop: "numberPlate", width: "120" },
  { label: "联系方式", prop: "contactNumber", width: "140" },
  { label: "公司名称", prop: "companyName" },
])
let dictList = tableProps.value.filter(v => v.type == 'dict').map(v => v.prop);
sel_option.value = proxy.useDict.apply(this, [...dictList, "applicationTableOrderStatus"]);
const navData = reactive([
  { label: "用车申请", value: "67" }, // 待审批 + 已驳回  web操作
  { label: "待审批", value: "0" }, // 已申请 web操作
  { label: "待调度", value: "1" }, // web操作
  { label: "待接单", value: "2" }, // 移动端操作
  { label: "待出车", value: "3" }, // 移动端操作
  { label: "待还车", value: "4" }, // 移动端操作
  { label: "还车成功", value: "5" }, // 移动端操作
])
const searchProps = computed(() => {
  switch (queryParams.value.orderStatus) {
    case "67":
    case "0":
      return [
        { label: "申请时间", prop: "createTime", type: searchComponentType.dateTime },
        { label: "用车人姓名", prop: "useName", type: searchComponentType.input },
        { label: "所属部门", prop: "companyId", type: searchComponentType.treeSelect },
      ];
    case "1":
    case "2":
      return [
        { label: "申请时间", prop: "createTime", type: searchComponentType.dateTime },
        { label: "用车人姓名", prop: "useName", type: searchComponentType.input },
        { label: "所属部门", prop: "companyId", type: searchComponentType.treeSelect },
      ]
    case "3":
    case "4":
    case "5":
      return [
        { label: "申请时间", prop: "createTime", type: searchComponentType.dateTime },
        { label: "用车人姓名", prop: "useName", type: searchComponentType.input },
        { label: "所属部门", prop: "companyId", type: searchComponentType.treeSelect },
        //  { label: "光伏板编号", prop: "numberPlate", type: searchComponentType.input },
        //  { label: "负责人", prop: "", type: searchComponentType.input },
      ]
    // case "6":
    //   return [
    //     { label: "申请时间", prop: "createTime", type: searchComponentType.dateTime },
    //     { label: "用车人姓名", prop: "useName", type: searchComponentType.input },
    //     { label: "所属部门", prop: "companyId", type: searchComponentType.treeSelect },
    //     { label: "光伏板编号", prop: "numberPlate", type: searchComponentType.input },
    //     { label: "负责人", prop: "", type: searchComponentType.input },
    //   ]
  }
})
const editParams = reactive([
  { label: "用车人姓名", prop: "useName", type: "input" },
  { label: "用车人电话", prop: "useTel", type: "input" },
  { label: "申请人姓名", prop: "applyName", type: "input", disabled: true },
  { label: "申请人电话", prop: "applyTel", type: "input", disabled: true },
  { label: "所属部门", prop: "companyName", type: "input", disabled: true },
  { label: "用途", prop: "purpose", type: "select" },
  { label: "上车地点", prop: "boardingLocation", type: "textarea" },
  { label: "用车事由", prop: "remark", type: "textarea" },
  { label: "目的地", prop: "destination", type: "destination" },
  { label: "用车时间", prop: "boardingTime", type: "datePicker" },
  { label: "返程时间", prop: "returnTime", type: "datePicker" },
  { label: "用车人数", prop: "userNum", type: "input", required: true },
  { label: "用车数量", prop: "vehicleNum", type: "input", required: true },
  { label: "照片上传", prop: "imageList", type: "photo" },
])
const returnDetailEditParams = reactive([
  { label: "用车人姓名", prop: "useName", type: "input" },
  { label: "用车人电话", prop: "useTel", type: "input" },
  { label: "申请人姓名", prop: "applyName", type: "input", disabled: true },
  { label: "申请人电话", prop: "applyTel", type: "input", disabled: true },
  { label: "所属部门", prop: "companyName", type: "input", disabled: true },
  { label: "用途", prop: "purpose", type: "select" },
  { label: "上车地点", prop: "boardingLocation", type: "textarea" },
  { label: "用车事由", prop: "remark", type: "textarea" },
  { label: "目的地", prop: "destination", type: "destination" },
  { label: "用车时间", prop: "boardingTime", type: "datePicker" },
  { label: "返程时间", prop: "returnTime", type: "datePicker" },
  { label: "用车人数", prop: "userNum", type: "input", required: true },
  { label: "用车数量", prop: "vehicleNum", type: "input", required: true },
  { label: "照片上传", prop: "imageList", type: "photo" },
  { label: "还车凭证", prop: "imageReturn", type: "photo" },
])
const returnEditParams = reactive([
  { label: "还车凭证", prop: "imageReturn", type: "photo" },
])
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 15,
    companyId: null,
    vehicleNum: null,
    applyName: null,
    applyTel: null,
    useName: null,
    useTel: null,
    purpose: null,
    remarks: null,
    boardingLocation: null,
    destination: null,
    boardingTime: null,
    returnTime: null,
    userNum: null,
    imageList: null,
    orderStatus: "67",
  },
  rules: {
    companyId: [
      { required: true, message: "所属作业公司不能为空", trigger: "blur" }
    ],
  }
});
const formDisabled = ref(false);

const { queryParams, form, rules } = toRefs(data) as any;
proxy.setValidateByTable(rules, editParams);
watch(() => queryParams.value.orderStatus, (val) => {
  if (val == '67' || val == '0' || val == '1') {
    tableProps.value = [
      { label: "申请状态", prop: "orderStatus", width: "120", type: 'dict' },
      { label: "用车人姓名", prop: "useName", width: "120" },
      { label: "用车人电话", prop: "useTel", width: "120" },
      { label: "申请人姓名", prop: "applyName", width: "120" },
      { label: "申请人电话", prop: "applyTel", width: "120" },
      { label: "所属部门", prop: "companyName", width: "120" },
      { label: "用途", prop: "purpose", width: "120", type: 'dict' },
      { label: "用车人数", prop: "userNum", width: "120" },
      { label: "用车事由", prop: "remark", width: "120" },
      { label: "上车地点", prop: "boardingLocation", width: "120" },
      { label: "目的地", prop: "destination", width: "120" },
      { label: "用车数量", prop: "vehicleNum", width: "120" },
      { label: "申请时间", prop: "createTime", width: "180" },
      { label: "用车时间", prop: "boardingTime", width: "180" },
      { label: "返程时间", prop: "returnTime", width: "180" },
    ]
  } else {
    tableProps.value = [
      { label: "申请状态", prop: "orderStatus", width: "120", type: 'dict' },
      { label: "用车人姓名", prop: "useName", width: "120" },
      { label: "用车人电话", prop: "useTel", width: "120" },
      { label: "申请人姓名", prop: "applyName", width: "120" },
      { label: "申请人电话", prop: "applyTel", width: "120" },
      { label: "所属部门", prop: "companyName", width: "120" },
      { label: "用途", prop: "purpose", width: "120", type: 'dict' },
      { label: "用车人数", prop: "userNum", width: "120" },
      { label: "用车事由", prop: "remark", width: "120" },
      { label: "上车地点", prop: "boardingLocation", width: "120" },
      { label: "目的地", prop: "destination", width: "120" },
      { label: "用车数量", prop: "vehicleNum", width: "120" },
      { label: "申请时间", prop: "createTime", width: "180" },
      { label: "用车时间", prop: "boardingTime", width: "180" },
      { label: "返程时间", prop: "returnTime", width: "180" },
    ]
  }
  nextTick(() => {
    proxy.$refs.myTable?.doLayout();
  });
}, { immediate: true })

function navChangeHandle(val) {
  queryParams.value.orderStatus = val;
  handleQuery();
}


function dispatchDetail(row) {
  listVehicles({ applyId: row.applyId }).then((response: any) => {
    form.value.selects = response.rows;
    detailOpen.value = true
  });
}

/** 查询用车申请列表 */
function getList() {
  loading.value = true;
  const query = JSON.parse(JSON.stringify(queryParams.value))
  if (queryParams.value?.createTime?.length > 0) {
    query.startTime = queryParams.value.createTime[0]
    query.endTime = queryParams.value.createTime[1]
    delete query.createTime
  }
  listApplication(query).then((response: any) => {
    applicationList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  detailOpen.value = false;
  returnOpen.value = false;
  returnDetailOpen.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    applyId: null,
    companyId: null,
    vehicleNum: null,
    applyName: null,
    applyTel: null,
    useName: null,
    useTel: null,
    purpose: null,
    remarks: null,
    boardingLocation: null,
    destination: [{ address: "" }],
    boardingTime: null,
    returnTime: null,
    userNum: null,
    orderStatus: null,
    imageList: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    createBy: null
  };
  proxy.resetForm("applicationRef");
  formDisabled.value = false;
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.applyId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加用车申请";
  form.value.applyName = user.userName
  form.value.applyTel = user.phonenumber
  form.value.companyName = user.dept.deptName
  form.value.companyId = user.dept.id
}

/** 提交\接单按钮操作 */
function handleSend(data, orderStatus) {
  const newData = JSON.parse(JSON.stringify(data))
  newData.orderStatus = orderStatus;
  updateApplication(newData).then(response => {
    proxy.$modal.msgSuccess("提交成功");
    cancel();
    getList();
  });
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _applyId = row.applyId || ids.value
  getApplication(_applyId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改用车申请";
  });
}

/** 还车按钮操作 */
function returnCar(row) {
  reset();
  const _applyId = row.applyId || ids.value
  getApplication(_applyId).then(response => {
    form.value = response.data;
    returnOpen.value = true;
  });
}

/** 详情按钮操作 */
function handleDetial(row) {
  reset();
  const _applyId = row.applyId || ids.value
  getApplication(_applyId).then(response => {
    form.value = response.data;
    open.value = true;
    formDisabled.value = true;
    title.value = "查看用车申请";
  });
}

/** 还车详情按钮操作 */
function returnHandleDetial(row) {
  reset();
  const _applyId = row.applyId || ids.value
  getApplication(_applyId).then(response => {
    form.value = response.data;
    returnDetailOpen.value = true;
    formDisabled.value = true;
    title.value = "还车详情";
  });
}

/** 还车提交按钮 */
function returnSubmitForm() {
  proxy.$refs["returnRef"].validate(async (valid) => {
    if (valid) {
      let fileList = await proxy.$refs["fileUpload"][0].uploadInfo();
      if (fileList) form.value.imageReturn = JSON.parse(JSON.stringify(fileList));
      form.value.orderStatus = 5;
      if (form.value.applyId != null) {
        updateApplication(form.value).then(response => {
          proxy.$modal.msgSuccess("还车成功");
          cancel();
          getList();
        });
      } else {
        addApplication(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          cancel();
          getList();
        });
      }
    }
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["applicationRef"].validate(async (valid) => {
    if (valid) {
      let fileList = await proxy.$refs["fileUpload"][0].uploadInfo();
      if (fileList) form.value.imageList = JSON.parse(JSON.stringify(fileList));
      if (form.value.destination) form.value.destination = form.value.destination;
      if (form.value.applyId != null) {
        updateApplication(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          cancel();
          getList();
        });
      } else {
        addApplication(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          cancel();
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _applyIds = row.applyId || ids.value;
  proxy.$modal.confirm('是否确认删除用车申请编号为"' + _applyIds + '"的数据项？').then(function () {
    return delApplication(_applyIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('gwc/application/export', {
    ...queryParams.value
  }, `用车申请_${dayjs(new Date()).format("YYYY-MM-DD_HH:mm:ss")}.xlsx`)
}

getList();
</script>
<style scoped lang="scss">
.textarea,
.destination,
.photo {
  display: block-flex !important;
  display: flex !important;
  width: calc(100% - 64px)
}

.disableClass {
  :deep(.item-actions) {
    opacity: 0 !important;
  }
}
</style>